<template>
  <section class="setting-bg pv-12 ph-16">
    <h3>预付费电表设置</h3>
    <div style="max-width: 400px;justify-content: space-between;" class="flex-row-center">
      <div class="fc-regular fs-base">退房自动清零</div>
      <el-switch
          v-model="checkOutCleanRemainderKwhFlag"
          inline-prompt
          :active-icon="Check"
          :active-value="'1'"
          :inactive-value="'2'"
          :inactive-icon="Close"
          @change="configChange(checkOutCleanRemainderKwhFlag, 'checkOutCleanRemainderKwhFlag')"
      />
    </div>
    <div class="flex-row-center">
      <span class="fc-regular fs-base">临时用电度数：{{ form.tempKwh }}</span>
      <el-button type="warning" link class="ml10" @click="handleEdit">编辑</el-button>
    </div>
    <el-dialog v-model="visible" title="临时用电度数" width="400px" @close="() => visible = false" :fullscreen="mobile" class="dialog-content-clear">
      <el-alert title="说明：员工操作临时用电后，会记录在电表的操作记录中" type="warning" :closable="false" />
      <el-form :model="form" ref="formRef" style="padding: 20px 40px;">
        <el-form-item prop="tempKwh" :rules="[{ required: true, message: '请输入临时用电度数', trigger: 'blur' }, { pattern: /^([1-9]\d{0,4}|10000)$/, message: '请输入1-99999之间的正整数', trigger: 'blur' }]">
          <el-input v-model="form.tempKwh" placeholder="请输入临时用电度数"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="() => visible = false">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </template>
    </el-dialog>
  </section>
</template>
<script setup name="PrePaidElectrictable">
import { Check, Close, Remove } from '@element-plus/icons-vue'
import useAppStore from '@/store/modules/app'
import { getInfo as getConfig, edit } from '@/api/setting/waterElectricity'
import { toRefs } from 'vue'

const { proxy } = getCurrentInstance()

const visible = ref(false)
const checkOutCleanRemainderKwhFlag = ref('1')
const configId = ref('')

const data = reactive({
  form: {
    tempKwh: 1
  }
})
const { form } = toRefs(data)

const mobile = computed(() => useAppStore().device === 'mobile')

function handleEdit() {
  visible.value = true
}

function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      const params = {
        tempKwh: form.value.tempKwh
      }
      if (configId.value !== '') {
        params.waterElectricityConfigId = configId.value
      }
      edit(params).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('保存成功')

          visible.value = false
          getInfo()
        }
      })
    }
  })
}

function getInfo() {
  getConfig().then(res => {
    const data = res.data
    checkOutCleanRemainderKwhFlag.value = data.checkOutCleanRemainderKwhFlag
    form.value.tempKwh = data.tempKwh
    configId.value = data.waterElectricityConfigId
  })
}

function configChange(val) {
  const params = {
    checkOutCleanRemainderKwhFlag: val
  }
  if (configId.value !== '') {
    params.waterElectricityConfigId = configId.value
  }
  edit(params).then(res => {
    if (res.code === 200) {
      proxy.$modal.msgSuccess('保存成功')

      getInfo()
    }
  })
}

getInfo()
</script>
